2 سبتمبر 2025العربية

استكشف خطاف experimental_useFormStatus التجريبي في React لإدارة مبسطة لحالة النماذج. تعلم التنفيذ والفوائد والاستخدام المتقدم مع أمثلة من العالم الحقيقي.

تنفيذ الخطاف التجريبي experimental_useFormStatus في React: إدارة محسّنة لحالة النماذج

يقدم عالم React المتطور باستمرار أدوات وتقنيات لتحسين تجربة المطور وأداء التطبيقات. إحدى هذه الميزات التجريبية هي الخطاف experimental_useFormStatus، المصمم لتبسيط إدارة حالة النموذج، خاصة في سيناريوهات إجراءات الخادم (server actions) والتحسين التدريجي (progressive enhancement). سيستكشف هذا الدليل الشامل الخطاف experimental_useFormStatus بالتفصيل، مع تقديم أمثلة عملية ورؤى لاستخدامه بفعالية.

ما هو `experimental_useFormStatus`؟

الخطاف experimental_useFormStatus هو واجهة برمجة تطبيقات تجريبية (experimental API) قدمها فريق React لتوفير طريقة أكثر بساطة لتتبع حالة إرسال النموذج، خاصة عند استخدام إجراءات الخادم. قبل هذا الخطاف، كانت إدارة الحالات المختلفة للنموذج (خامل، قيد الإرسال، نجاح، خطأ) تتطلب غالبًا منطقًا معقدًا لإدارة الحالة. يهدف experimental_useFormStatus إلى تجريد الكثير من هذا التعقيد، مما يوفر طريقة بسيطة وفعالة لمراقبة حالات إرسال النموذج والتفاعل معها.

الفوائد الرئيسية:

إدارة مبسطة للحالة: يقلل من التعليمات البرمجية المتكررة (boilerplate) اللازمة لإدارة حالات إرسال النموذج.
تجربة مستخدم محسّنة: يتيح تحديثات واجهة مستخدم أكثر استجابة بناءً على حالة النموذج.
تحسين قابلية قراءة الكود: يجعل الكود المتعلق بالنماذج أسهل في الفهم والصيانة.
تكامل سلس مع إجراءات الخادم: مصمم للعمل بشكل جيد بشكل خاص مع مكونات خادم React (React Server Components) وإجراءات الخادم.

التنفيذ الأساسي

لتوضيح التنفيذ الأساسي لـ experimental_useFormStatus، دعنا نفكر في مثال بسيط لنموذج اتصال. سيقوم هذا النموذج بجمع اسم المستخدم وبريده الإلكتروني ورسالته ثم إرسالها باستخدام إجراء خادم.

المتطلبات الأساسية

قبل الخوض في الكود، تأكد من أن لديك مشروع React مُعدًا بما يلي:

إصدار React يدعم واجهات برمجة التطبيقات التجريبية (تحقق من وثائق React لمعرفة الإصدار المطلوب).
مكونات خادم React ممكّنة (تُستخدم عادةً في أطر عمل مثل Next.js أو Remix).

مثال: نموذج اتصال بسيط

إليك مكون نموذج اتصال أساسي:

```jsx // app/actions.js (إجراء الخادم) 'use server' export async function submitContactForm(formData) { // محاكاة استدعاء قاعدة بيانات أو طلب API await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'جميع الحقول مطلوبة.' }; } try { // استبدل باستدعاء API حقيقي أو عملية قاعدة بيانات console.log('Form submitted:', { name, email, message }); return { success: true, message: 'تم إرسال النموذج بنجاح!' }; } catch (error) { console.error('Error submitting form:', error); return { success: false, message: 'فشل إرسال النموذج.' }; } } // app/components/ContactForm.jsx (مكون العميل) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

الاسم:

البريد الإلكتروني:

الرسالة:

</div>
      <SubmitButton />
    </form>
  );
}
```

<ul>
  <li><b>إجراء الخادم (<code>app/actions.js</code>):</b> يحدد هذا الملف الدالة <code>submitContactForm</code>، وهي إجراء خادم. تحاكي طلب API بتأخير لمدة ثانيتين لتوضيح الطبيعة غير المتزامنة لإرسال النموذج. كما أنها تتعامل مع التحقق الأساسي من الصحة ومعالجة الأخطاء.</li>
  <li><b>مكون العميل (<code>app/components/ContactForm.jsx</code>):</b> يحدد هذا الملف المكون <code>ContactForm</code>، وهو مكون عميل. يقوم باستيراد الخطاف <code>experimental_useFormStatus</code> والإجراء <code>submitContactForm</code>.</li>
  <li><b>استخدام <code>useFormStatus</code>:</b> داخل المكون <code>SubmitButton</code>، يتم استدعاء <code>useFormStatus</code>. يوفر هذا الخطاف معلومات حول حالة إرسال النموذج.</li>
  <li><b>خاصية <code>pending</code>:</b> تشير خاصية <code>pending</code> التي يعيدها <code>useFormStatus</code> إلى ما إذا كان النموذج قيد الإرسال حاليًا. تُستخدم لتعطيل زر الإرسال وعرض رسالة "جارٍ الإرسال...".</li>
  <li><b>ربط النموذج:</b> يتم ربط خاصية <code>action</code> لعنصر <code>form</code> بإجراء الخادم <code>submitContactForm</code>. هذا يخبر React باستدعاء إجراء الخادم عند إرسال النموذج.</li>
</ul>

<h2>الاستخدام المتقدم والاعتبارات</h2>

<h3>التعامل مع حالات النجاح والخطأ</h3>

<p>بينما يبسط <code>experimental_useFormStatus</code> تتبع حالة الإرسال، غالبًا ما تحتاج إلى التعامل مع حالات النجاح والخطأ بشكل صريح. يمكن لإجراءات الخادم إرجاع بيانات تشير إلى النجاح أو الفشل، والتي يمكنك استخدامها بعد ذلك لتحديث واجهة المستخدم وفقًا لذلك.</p>

```jsx
// app/components/ContactForm.jsx (معدل)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'جارٍ الإرسال...' : 'إرسال'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">الاسم:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">البريد الإلكتروني:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">الرسالة:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>حالة للرسائل:</b> تم إدخال متغير حالة <code>message</code> لتخزين النتيجة التي يعيدها إجراء الخادم.</li>
  <li><b>التعامل مع النتيجة:</b> بعد إرسال النموذج، تقوم الدالة <code>handleSubmit</code> بتحديث حالة <code>message</code> بنتيجة إجراء الخادم.</li>
  <li><b>عرض الرسائل:</b> يعرض المكون الرسالة بناءً على خاصية <code>success</code> للنتيجة، مطبقًا فئات CSS مختلفة لحالات النجاح والخطأ.</li>
</ul>

<h3>التحسين التدريجي</h3>

<p>يبرز <code>experimental_useFormStatus</code> في سيناريوهات التحسين التدريجي. من خلال التحسين التدريجي لنموذج HTML قياسي باستخدام React، يمكنك توفير تجربة مستخدم أفضل دون التضحية بالوظائف الأساسية إذا فشل JavaScript.</p>

<p>بدءًا من نموذج HTML أساسي:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">الرسالة:</label>
    <textarea id="message" name="message" required>

```

يمكنك بعد ذلك تحسينه تدريجيًا باستخدام React و experimental_useFormStatus.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // استخدم null كحالة أولية إذا لم تكن تعتمد عليها return (

الاسم:

البريد الإلكتروني:

الرسالة:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<ul>
  <li><b>نموذج HTML الأولي:</b> يحتوي ملف <code>public/contact.html</code> على نموذج HTML قياسي سيعمل حتى بدون JavaScript.</li>
  <li><b>التحسين التدريجي:</b> يقوم المكون <code>EnhancedContactForm</code> بتحسين نموذج HTML تدريجيًا. إذا تم تمكين JavaScript، يتولى React الأمر ويوفر تجربة مستخدم أغنى.</li>
  <li><b>الخطاف <code>useFormState</code>:</b> يستخدم <code>useFormState</code> لإدارة حالة النموذج وربط إجراء الخادم بالنموذج.</li>
  <li><b><code>state</code>:</b> تحتفظ <code>state</code> من <code>useFormState</code> الآن بالقيمة المرجعة من إجراء الخادم، والتي يمكن التحقق منها بحثًا عن رسائل النجاح أو الخطأ.</li>
</ul>

<h3>الاعتبارات الدولية</h3>

<p>عند تنفيذ نماذج لجمهور عالمي، تدخل العديد من الاعتبارات الدولية حيز التنفيذ:</p>

<ul>
  <li><b>الترجمة المحلية (Localization):</b> تأكد من ترجمة تسميات النماذج والرسائل ورسائل الخطأ إلى لغات مختلفة. يمكن لأدوات مثل i18next المساعدة في إدارة الترجمات.</li>
  <li><b>تنسيقات التاريخ والأرقام:</b> تعامل مع تنسيقات التاريخ والأرقام وفقًا للغة المستخدم. استخدم مكتبات مثل <code>Intl</code> أو <code>moment.js</code> (لتنسيق التاريخ، على الرغم من أنها تعتبر الآن قديمة) لتنسيق التواريخ والأرقام بشكل صحيح.</li>
  <li><b>تنسيقات العناوين:</b> لدى البلدان المختلفة تنسيقات عناوين مختلفة. فكر في استخدام مكتبة تدعم تنسيقات عناوين متعددة أو إنشاء حقول نماذج مخصصة بناءً على موقع المستخدم.</li>
  <li><b>التحقق من رقم الهاتف:</b> تحقق من أرقام الهواتف وفقًا للمعايير الدولية. يمكن أن تساعد مكتبات مثل <code>libphonenumber-js</code> في ذلك.</li>
  <li><b>دعم من اليمين إلى اليسار (RTL):</b> تأكد من أن تصميم النموذج يدعم اللغات التي تُكتب من اليمين إلى اليسار مثل العربية أو العبرية. استخدم خصائص CSS المنطقية (مثل <code>margin-inline-start</code> بدلاً من <code>margin-left</code>) لدعم أفضل لـ RTL.</li>
  <li><b>إمكانية الوصول (Accessibility):</b> التزم بإرشادات إمكانية الوصول (WCAG) لضمان أن نماذجك قابلة للاستخدام من قبل الأشخاص ذوي الإعاقة، بغض النظر عن موقعهم.</li>
</ul>

<p><b>مثال: تسميات نماذج مترجمة</b></p>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/ar.json
{
  "contactForm": {
    "nameLabel": "الاسم",
    "emailLabel": "البريد الإلكتروني",
    "messageLabel": "الرسالة",
    "submitButton": "إرسال",
    "successMessage": "تم إرسال النموذج بنجاح!",
    "errorMessage": "فشل إرسال النموذج."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>ملفات الترجمة:</b> يستخدم المثال <code>react-i18next</code> لإدارة الترجمات. تحتوي ملفات JSON منفصلة على ترجمات للغات مختلفة.</li>
  <li><b>الخطاف <code>useTranslation</code>:</b> يوفر الخطاف <code>useTranslation</code> الوصول إلى دالة الترجمة (<code>t</code>)، والتي تُستخدم لاسترداد النصوص المترجمة.</li>
  <li><b>التسميات المترجمة:</b> يتم استرداد تسميات النموذج ونص الزر باستخدام الدالة <code>t</code>، مما يضمن عرضها باللغة المفضلة للمستخدم.</li>
</ul>

<h3>اعتبارات إمكانية الوصول</h3>

<p>يعد ضمان إمكانية الوصول إلى نماذجك لجميع المستخدمين، بما في ذلك ذوي الإعاقة، أمرًا بالغ الأهمية. إليك بعض الاعتبارات الرئيسية لإمكانية الوصول:</p>

<ul>
  <li><b>HTML الدلالي (Semantic HTML):</b> استخدم عناصر HTML الدلالية مثل <code><label></code>, <code><input></code>, <code><textarea></code>, and <code><button></code> بشكل صحيح.</li>
  <li><b>التسميات (Labels):</b> اربط التسميات بعناصر تحكم النموذج باستخدام السمة <code>for</code> على <code><label></code> والسمة <code>id</code> على عنصر تحكم النموذج.</li>
  <li><b>سمات ARIA:</b> استخدم سمات ARIA لتوفير معلومات إضافية للتقنيات المساعدة. على سبيل المثال، استخدم <code>aria-describedby</code> لربط عنصر تحكم النموذج بوصف.</li>
  <li><b>معالجة الأخطاء:</b> أشر بوضوح إلى الأخطاء وقدم رسائل خطأ مفيدة. استخدم سمات ARIA مثل <code>aria-invalid</code> للإشارة إلى عناصر تحكم النموذج غير الصالحة.</li>
  <li><b>التنقل باستخدام لوحة المفاتيح:</b> تأكد من أن المستخدمين يمكنهم التنقل في النموذج باستخدام لوحة المفاتيح. استخدم السمة <code>tabindex</code> للتحكم في ترتيب التركيز إذا لزم الأمر.</li>
  <li><b>تباين الألوان:</b> تأكد من وجود تباين كافٍ في الألوان بين النص وألوان الخلفية.</li>
  <li><b>هيكل النموذج:</b> استخدم هيكل نموذج واضح ومتسق. قم بتجميع عناصر تحكم النموذج ذات الصلة باستخدام عناصر <code><fieldset></code> و <code><legend></code>.</li>
</ul>

<p><b>مثال: معالجة أخطاء يمكن الوصول إليها</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'جارٍ الإرسال...' : 'إرسال'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // التحقق الأساسي من جانب العميل
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'الاسم مطلوب.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'البريد الإلكتروني مطلوب.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'الرسالة مطلوبة.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // مسح الأخطاء السابقة
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">الاسم:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">البريد الإلكتروني:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">الرسالة:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>حالة الخطأ:</b> يحتفظ المكون بحالة <code>errors</code> لتتبع أخطاء التحقق.</li>
  <li><b>التحقق من جانب العميل:</b> تقوم الدالة <code>handleSubmit</code> بإجراء تحقق أساسي من جانب العميل قبل إرسال النموذج.</li>
  <li><b>سمات ARIA:</b> يتم تعيين السمة <code>aria-invalid</code> إلى <code>true</code> إذا كان هناك خطأ في عنصر تحكم نموذج معين. تربط السمة <code>aria-describedby</code> عنصر تحكم النموذج برسالة الخطأ.</li>
  <li><b>رسائل الخطأ:</b> يتم عرض رسائل الخطأ بجوار عناصر التحكم في النموذج المقابلة.</li>
</ul>

<h2>التحديات والقيود المحتملة</h2>

<ul>
  <li><b>الحالة التجريبية:</b> نظرًا لكونها واجهة برمجة تطبيقات تجريبية، فإن <code>experimental_useFormStatus</code> عرضة للتغيير أو الإزالة في إصدارات React المستقبلية. من الضروري البقاء على اطلاع بوثائق React والاستعداد لتكييف الكود الخاص بك إذا لزم الأمر.</li>
  <li><b>نطاق محدود:</b> يركز الخطاف بشكل أساسي على تتبع حالة الإرسال ولا يوفر ميزات إدارة نماذج شاملة مثل التحقق من الصحة أو معالجة البيانات. قد لا تزال بحاجة إلى تنفيذ منطق إضافي لهذه الجوانب.</li>
  <li><b>الاعتماد على إجراءات الخادم:</b> تم تصميم الخطاف للعمل مع إجراءات الخادم، والتي قد لا تكون مناسبة لجميع حالات الاستخدام. إذا كنت لا تستخدم إجراءات الخادم، فقد تحتاج إلى إيجاد حلول بديلة لإدارة حالة النموذج.</li>
</ul>

<h2>الخلاصة</h2>

<p>يقدم الخطاف <code>experimental_useFormStatus</code> تحسينًا كبيرًا في إدارة حالات إرسال النماذج في React، خاصة عند العمل مع إجراءات الخادم والتحسين التدريجي. من خلال تبسيط إدارة الحالة وتوفير واجهة برمجة تطبيقات واضحة وموجزة، فإنه يعزز تجربة المطور وتجربة المستخدم على حد سواء. ومع ذلك، نظرًا لطبيعته التجريبية، من الأهمية بمكان البقاء على اطلاع بالتحديثات والتغييرات المحتملة في إصدارات React المستقبلية. من خلال فهم فوائده وقيوده وأفضل الممارسات، يمكنك الاستفادة بشكل فعال من <code>experimental_useFormStatus</code> لبناء نماذج أكثر قوة وسهولة في الاستخدام في تطبيقات React الخاصة بك. تذكر أن تأخذ في الاعتبار أفضل ممارسات التدويل وإمكانية الوصول لإنشاء نماذج شاملة لجمهور عالمي.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">حالة النموذج</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">نماذج React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">واجهة برمجة تطبيقات تجريبية</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">خطافات React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">إرسال النموذج</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">نماذج غير متزامنة</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">تحسين تدريجي</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>

تنفيذ الخطاف التجريبي experimental_useFormStatus في React: إدارة محسّنة لحالة النماذج

ما هو experimental_useFormStatus؟

التنفيذ الأساسي

المتطلبات الأساسية

مثال: نموذج اتصال بسيط

ما هو `experimental_useFormStatus`؟